<template>
  <view class="forget-password-container">
    <!-- 头部 -->
    <view class="header">
      <view class="logo">
        <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
      </view>
      <view class="title">找回密码</view>
      <view class="subtitle">请输入您的手机号码</view>
    </view>
    
    <!-- 表单 -->
    <view class="form-container">
      <view class="form-group">
        <input 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号" 
          maxlength="11"
          class="form-input"
        />
      </view>
      
      <view class="form-group">
        <view class="verify-code-container">
          <input 
            type="number" 
            v-model="verifyCode" 
            placeholder="请输入验证码" 
            maxlength="6"
            class="form-input verify-input"
          />
          <button 
            class="verify-btn" 
            :disabled="countdown > 0 || !phone"
            @click="sendVerifyCode"
          >
            {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
          </button>
        </view>
      </view>
      
      <view class="form-group">
        <input 
          type="password" 
          v-model="newPassword" 
          placeholder="请输入新密码" 
          class="form-input"
        />
      </view>
      
      <view class="form-group">
        <input 
          type="password" 
          v-model="confirmPassword" 
          placeholder="请再次输入新密码" 
          class="form-input"
        />
      </view>
      
      <button 
        class="reset-btn" 
        :disabled="!canSubmit"
        @click="resetPassword"
      >
        重置密码
      </button>
    </view>
    
    <!-- 返回登录 -->
    <view class="back-login">
      <text @click="goToLogin">返回登录</text>
    </view>
  </view>
</template>

<script>
import { sendVerifyCode, resetPassword } from '@/api/user'

export default {
  data() {
    return {
      phone: '',
      verifyCode: '',
      newPassword: '',
      confirmPassword: '',
      countdown: 0,
      timer: null
    }
  },
  computed: {
    canSubmit() {
      return this.phone && this.verifyCode && this.newPassword && this.confirmPassword
    }
  },
  methods: {
    async sendVerifyCode() {
      if (!this.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        uni.showToast({ title: '手机号格式不正确', icon: 'none' })
        return
      }
      
      try {
        await sendVerifyCode(this.phone)
        uni.showToast({ title: '验证码已发送', icon: 'success' })
        this.startCountdown()
      } catch (error) {
        uni.showToast({ 
          title: error.message || '发送失败，请重试', 
          icon: 'none' 
        })
      }
    },
    
    startCountdown() {
      this.countdown = 60
      this.timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.timer)
        }
      }, 1000)
    },
    
    async resetPassword() {
      if (!this.canSubmit) return
      
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({ title: '两次密码输入不一致', icon: 'none' })
        return
      }
      
      if (this.newPassword.length < 6) {
        uni.showToast({ title: '密码长度不能少于6位', icon: 'none' })
        return
      }
      
      try {
        uni.showLoading({ title: '重置中...' })
        
        await resetPassword({
          phone: this.phone,
          verifyCode: this.verifyCode,
          newPassword: this.newPassword
        })
        
        uni.hideLoading()
        uni.showToast({ title: '密码重置成功', icon: 'success' })
        
        setTimeout(() => {
          this.goToLogin()
        }, 1500)
        
      } catch (error) {
        uni.hideLoading()
        uni.showToast({ 
          title: error.message || '重置失败，请重试', 
          icon: 'none' 
        })
      }
    },
    
    goToLogin() {
      uni.redirectTo({
        url: '/pages/login/index'
      })
    }
  },
  
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.forget-password-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx;
}

.header {
  text-align: center;
  margin-bottom: 80rpx;
  
  .logo {
    width: 120rpx;
    height: 120rpx;
    margin: 0 auto 40rpx;
    
    image {
      width: 100%;
      height: 100%;
      border-radius: 60rpx;
    }
  }
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.form-container {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.form-input {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  box-sizing: border-box;
  
  &:focus {
    border-color: #667eea;
  }
}

.verify-code-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  .verify-input {
    flex: 1;
  }
  
  .verify-btn {
    width: 200rpx;
    height: 88rpx;
    background: #667eea;
    color: #ffffff;
    border: none;
    border-radius: 12rpx;
    font-size: 26rpx;
    
    &:disabled {
      background: #cccccc;
    }
  }
}

.reset-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  
  &:disabled {
    background: #cccccc;
  }
}

.back-login {
  text-align: center;
  margin-top: 60rpx;
  
  text {
    color: #ffffff;
    font-size: 28rpx;
    text-decoration: underline;
  }
}
</style> 